import { Component } from 'react'

class HelloWorld extends Component {
    constructor(props) {
        super(props);
        // 2.通过函数使用bind返回一个新的函数，新的函数this指向
        this.handleCounterAdd = this.handleCounterAdd.bind(this)
        this.reversedMsg = this.reversedMsg.bind(this)
        // data
        this.state = {
            msg: '你好，React！',
            counter: 0,
        }
    }

    // methods
    handleCounterAdd() {
        // console.log(this)
        this.setState({
            counter: this.state.counter + 1
        })
    }

    reversedMsg(e, val) {
        console.log(e)
        console.log(val)
        // this.state.msg = 'xxx'
        this.setState({
            msg: this.state.msg.split('').reverse().join('')
        })
        console.log(this.state.msg)
    }

    // 相当于 .vue 的<template>
    render() {
        return (
            <div>
                <h1>Hello React!!!</h1>
                <h2>{ this.state.msg }</h2>
                <button onClick={(event) => this.reversedMsg(event, '测试传参')}>翻转msg</button>
                <hr/>
                <h2>counter: { this.state.counter }</h2>
                {/* react 调用 方法会碰见this指向的问题 */}
                <button onClick={this.handleCounterAdd}>counter++</button>
                {/* 1.使用箭头函数处理 */}
                <button onClick={ () => this.handleCounterAdd() }>counter++</button>
            </div>
        )
    }
}

export default HelloWorld

